<template>
  <!-- 企业直播模块入口 -->
	<view class="wrap">
		<room-header :online="onlineNum"/>
		<view class="player-container">
			<player
				:is-playback="isPlayback"
				@update-is-playback="updateIsPlayback"
			/>
		</view>
		<view class="tabs">
			<u-tabs :list="tabList" :is-scroll="false" active-color="#000" inactive-color="#666"
			 :current="tabCurrent" @change="tabChange"></u-tabs>
		</view>
		<view class="desc-box" v-if="tabCurrent == 0" style="margin: 0;padding: 0;">
			<view class="content">
				<image :src="baseUrl+roomInfo.descImg" mode="widthFix" style="width: 100%;"></image>
			</view>
		</view>
		<view class="chat-box" v-if="tabCurrent == 1">
			<view class="chat-scroll-box">
				<scroll-view scroll-y="true" style="height: 100%;" :scroll-top="scrollTop" @scrolltoupper="scrollToTop">
					<Loading :loaded="status" :loading="loading"></Loading>
					<view id="box" class="chat" ref="chat">
						<view v-for="(item, index) in records" :key="index" :id="`msg-${item.id}`">
							<view class="day-box" v-if="item.show">{{item._add_time}}</view>
							<view class="chat-item" :class="{ 'right-box': item.user_id == myUid }">
								<image class="avatar" :src="baseUrl+item.avatar" mode=""></image>
								<!-- 消息 -->
								<view class="msg-box">
									<view class="nickname">{{item.nickname}}</view>
									<view class="msn">{{item.msn}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="footer-box">
				<view class="list-icon" @click="navTo('/pages/live/roomList/roomList')">
					<image :src="roomInfo.returnIcon ? baseUrl+roomInfo.returnIcon:'../../static/list.png'" mode="widthFix"></image>
				</view>
				<!-- <view class="words" @click="uploadImg"><text class="iconfont icon-tupian"></text></view> -->
				<view class="input-box">
					<input type="text" placeholder="说点什么" v-model="con" confirm-type="send" @confirm="sendText" />
					<!-- <text class="iconfont icon-fasong" @click="sendText" :class="{ isSend: isSend }"></text> -->
				</view>
				<view class="smile-icon">
					<image src="../../static/smile.png" mode="widthFix"></image>
				</view>
				<view class="cart-icon" @click="showGoods = true">
					<image :src="roomInfo.goodsIcon ? baseUrl+roomInfo.goodsIcon:'../../static/shop.png'" mode="widthFix"></image>
				</view>
				<likeButton :throttle="100" :large="2" :duration="3000" :imgWidth="90" :imgHeight="90" :site="[105, 100]" :showImgs="likeImgs">
					<view class="tool-item like">
						<view class="like-icon" @click="likeLive">
							<image :src="roomInfo.likeIcon ? baseUrl+roomInfo.likeIcon:'../../static/like.png'" mode="widthFix"></image>
						</view>
					</view>
				</likeButton>
				
				<view class="more-icon" @click="showActionQrcode">
					<image :src="roomInfo.shareIcon ? baseUrl+roomInfo.shareIcon:'../../static/more.png'" mode="widthFix"></image>
				</view>
				<!-- <view class="emoji" @click="isSwiper = !isSwiper"><span class="iconfont icon-biaoqing"></span></view> -->
			</view>
		</view>
		<view class="ranking" v-if="tabCurrent == 2">
			<view class="ranking-list">
				<view class="item" v-for="(item,index) in roomInfo.userList">
					<view class="rank-info">
						<view class="avatars"><img :src="baseUrl+item.headimgurl"/></view>
						<view class="nickname">{{item.nickname}}</view>
					</view>
					<view class="time">{{item.second}}</view>
				</view>
			</view>
		</view>
		<view class="goods" v-if="goods && showJxGoods">
			<view class="image">
				<image :src="baseUrl+goods.goodsThumb" mode="aspectFill"></image>
			</view>
			<view class="info">
				<view class="title u-line-2">{{goods.goodsName}}</view>
				<view class="price">
					<text>￥{{goods.salePrice}}</text>
					<!-- <text class="ot-price">￥{{goods.marketPrice}}</text> -->
				</view>
				<view class="buy" @click="navTo('/pages/shop/goods/info?goods_id='+goods.goodsId+'&live_id='+liveId)">
					<text>去购买</text>
				</view>
			</view>
			<view class="close" @click="showJxGoods = false">
				<u-icon name="close-circle" color="#FFFFFF" size="48"></u-icon>
			</view>
		</view>
<!-- 		<view class="coupon-icon" @click="getCouponList(1)" v-if="roomInfo.couponIds">
			<image src="../../static/coupon.png" mode="widthFix"></image>
		</view>
		<view class="lucky-icon" @click="showTaskList = true" v-if="roomInfo.taskIds">
			<image src="../../static/lp.png" mode="widthFix"></image>
		</view>
		<view class="share-icon" @click="showTips = true">
			<image src="../../static/share.png" mode="widthFix"></image>
		</view> -->
		<u-popup v-model="showGoods" mode="bottom" border-radius="14">
			<view class="goods-box">
				<view class="titles">推荐产品</view>
				<view class="goods-list">
					<scroll-view class="goods-list-scroll" :scroll-y="true">
						<view class="item" v-for="(item,index) in roomInfo.goodsList" :key="index">
							<view class="image">
								<image :src="baseUrl+item.goodsThumb" mode="aspectFill"></image>
							</view>
							<view class="info">
								<view class="title u-line-2">{{item.goodsName}}</view>
								<view class="price">
									<text>￥{{item.salePrice}}</text>
									<text class="ot-price">￥{{item.marketPrice}}</text>
								</view>
								<view class="buy" @click="navTo('/pages/shop/goods/info?goods_id='+item.goodsId+'&live_id='+liveId)">
									<text>去购买</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<view class="lucky-icon" @click="getTaskList" v-if="roomInfo.taskIds">
			<image :src="roomInfo.taskIcon ? baseUrl+roomInfo.taskIcon:'../../static/lp.png'" mode="widthFix"></image>
			<view class="txt">领福利</view>
		</view>
		<view class="share-icon" @click="showWechatQrcode = true" v-if="roomInfo.wechatQrcode">
			<image :src="roomInfo.wechatIcon ? baseUrl+roomInfo.wechatIcon:'../../static/wx.png'" mode="widthFix"></image>
			<view class="txt">加微信</view>
		</view>
		<u-popup v-model="showWechatQrcode" mode="center" :closeable="true" border-radius="14">
			<view class="wechat-qrcode">
				<view class="titles">添加客服微信</view>
				<view class="img">
					<image :src="baseUrl+roomInfo.wechatQrcode" mode="widthFix"></image>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showCoupon" mode="center" width="65%" z-index="9" :custom-style="customStyle">
			<view v-if="couponList.length==1" class="coupon-box">
				<view @click="receivefree(couponList[0].type_id)">
					<image src="../../../shop/static/coupon_bg0.png" mode="widthFix"></image>
					<view class="coupon-con">
						<view class="price">{{couponList[0].type_money}}</view>
						<view class="name">{{couponList[0].type_name}}</view>
						<view class="time">有效期：{{couponList[0].use_start_date}}~{{couponList[0].use_end_date}}</view>
					</view>
				</view>
				<view class="close" @click="showCoupon = false">
					<u-icon name="close-circle" color="#FFFFFF" size="68"></u-icon>
				</view>
			</view>
			<view v-else class="coupon-box" @click="navTo('/pages/shop/bonus/center?is_live=1')">
				<image src="../../../shop/static/coupon_bg.png" mode="widthFix"></image>
				<view class="coupon-cons">
					<view class="title">恭喜您获得</view>
					<view class="sub-title">{{totalCoupon}}元组合券</view>
					<view class="coupon-list">
						<scroll-view class="coupon-list-scroll" scroll-y="true">
							<view class="items" v-for="(item,index) in couponList">
								<image src="../../../shop/static/coupon_item.png" mode="widthFix"></image>
								<view class="price">{{item.type_money}}</view>
								<view class="name" v-if="item.use_type == 0">全场通用</view>
								<view class="name" v-if="item.use_type == 1">指定分类</view>
								<view class="name" v-if="item.use_type == 2">指定商品</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="close" @click="showCoupon = false">
					<u-icon name="close-circle" color="#FFFFFF" size="68"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showLucky" mode="center" width="65%" z-index="9" :custom-style="customStyle">
			<view class="coupon-box">
				<view>
					<image src="../../../shop/static/coupon_bg0.png" mode="widthFix"></image>
					<view class="coupon-con">
						<view class="price">{{luckData.money}}</view>
						<view class="name">{{luckData.name}}</view>
						<view class="time" v-if="luckData.type == 0">可用于提现或商城购物</view>
						<view class="time" v-if="luckData.type == 1">只可用于商城购物</view>
					</view>
				</view>
				<view class="submit" @click="receiveLucky(luckData.id)"></view>
				<view class="close" @click="showLucky = false">
					<u-icon name="close-circle" color="#FFFFFF" size="68"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showTask" mode="center" width="65%" z-index="9" :custom-style="customStyle">
			<view class="coupon-box">
				<image src="../../../shop/static/coupon_bg.png" mode="widthFix"></image>
				<view class="coupon-cons">
					<view class="title">恭喜您获得</view>
					<view class="sub-title">直播任务奖励</view>
					<view class="task-box" v-if="taskData.type > 0">
						<view class="price">
							<text>￥</text>{{taskData.money}}
						</view>
						<view class="name" v-if="taskData.type == 1">积分</view>
						<view class="name" v-if="taskData.type == 2">购物分</view>
					</view>
					<view class="task-box" v-else>
						<view class="goods-name">{{taskData.goods_name}}</view>
						<view v-if="taskData.logistics_type == 0">
							<view class="select" v-if="!address"
							@click="navTo('/pages/member/address/list?source=2&from=live')">选择收货地址</view>
							<view class="address" v-else @click="navTo('/pages/member/address/list?source=2&from=live')">
								收货地址：{{address}}
							</view>
						</view>
						<view v-if="taskData.logistics_type == 1">
							<view class="select" v-if="!sid"
							@click="navTo('/pages/user/store/index?from=live')">选择自提门店</view>
							<view class="select" v-else @click="navTo('/pages/user/store/index?from=live')">
								{{store_name}}
							</view>
						</view>
					</view>
					
				</view>
				<view class="submit" @click="receiveTask(taskData.id,taskData.type,taskData.logistics_type)"></view>
				<view class="close" @click="showTask = false">
					<u-icon name="close-circle" color="#FFFFFF" size="68"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showTaskList" mode="center" width="85%" border-radius="14">
			<view class="task-list-box">
				<view class="task-bg">
					<image src="../../static/task-bg.png" mode="widthFix"></image>
				</view>
				<view class="titles">做任务，领福利</view>
				<view class="list">
					<view class="item" v-for="(item,index) in allTaskList" :key="index">
						<view class="icon">
							<image :src="item.icon" mode="widthFix"></image>
						</view>
						<view class="center-box">
							<view class="top">
								<view class="name">{{item.name}}</view>
								<view class="progress">
									<u-line-progress height="16" inactive-color="#cac7c7" 
									:show-percent="false" active-color="#e50b7c" :percent="item.progress"></u-line-progress>
								</view>
								<view class="num">(<text>{{item.mins}}</text>/{{item.condition}})</view>
							</view>
							<view class="desc">{{item.desc}}</view>
						</view>
						<view class="right-box">
							<text v-if="item.task_status == 0" @click="showTaskList = false">看直播</text>
							<text v-else-if="item.task_status == 1"  @click="lqTask(item.item)">领奖励</text>
							<text v-else>已领奖</text>
						</view>
					</view>
				</view>
				<view class="close" @click="showTaskList = false">
					<view class="icon">
						<u-icon name="close" color="#FFF" size="28"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="tips" v-show="showTips" @click="showTips = false">
			<image src="../../static/share-info2.png" mode="widthFix"></image>
		</view>
		<u-mask :show="showTips" @click="showTips = false"></u-mask>
		<u-popup v-model="showShareQrcode" mode="center"  border-radius="14">
			<view class="distribution-posters">
				<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval"
					:duration="duration" @change="bindchange" previous-margin="40px" next-margin="40px">
					<block v-for="(item,index) in img_url" :key="index" class="img-list">
						<swiper-item class="aaa">
							<div class="box" ref="bill" :class="swiperIndex == index ? 'active' : 'quiet'">
								<view class="user-msg">
									<view class="user-code">
										<image class="canvas" :style="{height:hg+'px'}" :src="item.image"
											v-if="item.image" mode="widthFix"></image>
									</view>
								</view>
							</div>
						</swiper-item>
					</block>
				</swiper>
				<view class="qrcode-tips">长按图片保存</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import Player from '@/pages/live/components/player/player.vue';
	import Loading from './Loading.vue';
	import roomHeader from './roomHeader.vue';
	import likeButton from '../like-button/like-button.vue'
	import { RoomStatus } from '@/utils/constants.js';
	
	const IntroTabKey = 'intro';
	const ChatTabKey = 'chat';
	
	export default {
		name: 'enterprise',
		
		components: {
			Player,
			Loading,
			roomHeader,
			likeButton
		},
		props: {
			liveId: {
				type: String,
				default: '',
			}
		},
		
		data() {
			return {
				baseUrl: this.config.baseUrl,
				isPlayback: false,
				tabs: [{
					key: IntroTabKey,
					text: '简介',
				}],
				activeTab: IntroTabKey,
				tabList: [{
					name: '简介'
				}, {
					name: '聊天'
				}, {
					name: '排行'
				}],
				tabCurrent: 1,
				chatList:[],
				scrollTop: 0,
				loading:false,
				page:1,
				limit:15,
				con: '',
				status: false,
				uidTo:0,
				myUid: 0,
				ws:null,
				wssUrl:this.config.wsUrl,
				timer:null,
				isScroll:false,
				
				showCoupon:false,
				couponList:[],
				totalCoupon:0,
				customStyle:{
					background:'none'
				},
				showLucky:false,
				luckData:'',
				showTask:false,
				taskData:'',
				selectAddress:{
					address_id : 0
				},
				address:'',
				sid:0,
				store_name:'',
				goods:[],
				showJxGoods:false,
				onlineNum:0,
				showTaskList:false,
				showTips:false,
				showWechatQrcode:false,
				allTaskList:[],
				likeCount:0,
				likeImgs: [],
				circular: false,
				autoplay: false,
				interval: 3000,
				duration: 500,
				swiperIndex: 0,
				spreadList: [],
				spreadData:[],
				wd: 375,
				hg: 570,
				indicatorDots: false,
				img_url:[],
				current_img:'',
				showShareQrcode:false,
				showGoods:false
			};
		},
		
		computed: {
			...mapGetters({
				roomInfo: 'liveroom/info',
			}),
			roomStatus() {
				return this.roomInfo.status;
			},
			isInited() {
				return this.roomStatus !== RoomStatus.no_data;
			},
			records() {
				return this.chatList.map((item, index) => {
					if (index) {
						if (item.add_time - this.chatList[index - 1].add_time >= 300) {
							item.show = true;
						} else {
							item.show = false;
						}
					} else {
						item.show = true;
					}
					return item;
				});
			},
			isSend() {
				if (this.con.length == 0) {
					return false;
				} else {
					return true;
				}
			},
		},
		
		watch: {
			// roomStatus(val, oldVal) {
			// 	// 从未初始化变为未开始、直播中时，展示聊天 tab
			// 	if (oldVal === RoomStatus.no_data && [RoomStatus.not_start, RoomStatus.started].includes(val)) {
			// 		this.tabs.push({
			// 			key: ChatTabKey,
			// 			text: '聊天',
			// 		});
			// 	}
			// },
		},
		mounted() {
			let that = this
			this.likeImgs = [
				require('../../static/like/bg1.png'),
				require('../../static/like/bg2.png'),
				require('../../static/like/bg3.png'),
				require('../../static/like/bg4.png'),
				require('../../static/like/bg5.png'),
				require('../../static/like/bg6.png'),
			];
			
			let authcode = uni.getStorageSync("authcode");
			if(!authcode){
				return
			}
			// this.getChatList()
			// #ifdef H5
			let dom = document.querySelector(".chat-box");
			dom.style.height = window.innerHeight-290 + 'px'
			// #endif
			let initSocket = () => {
				this.ws = uni.connectSocket({
					url: this.wssUrl,
					method: 'GET',
					success: (res) => {
						console.log('链接成功')
						setTimeout(function(){
							that.send({
								user_id:that.myUid,
								name:'测试',
								room_id: that.liveId,
								type: 'login'
							})
						},500)
						
						this.timer = setInterval(function() {
							console.log('ping')
							that.send({
								type: "ping",
								user_id:that.myUid,
								name:'测试',
								room_id: that.liveId,
							});
						}, 10000);
						this.$nextTick(e => {
							this.getChatList();
						})
					},fail(e) {
						console.log(e)
					}
				});
				this.ws.onMessage(function(res){
					let data = JSON.parse(res.data);
					if (data.type == 'say') {
						data.msn = data.content;
					}
					if (data.type == 'login') {
						// console.log(data)
						that.onlineNum = data.online_num
						return
					}
					if (data.type == 'logout') {
						return
					}
					if (data.type == 'coupon') {
						that.getCouponList(0)
						return
					}
					if (data.type == 'lucky') {
						that.getLuckyData(data.lucky_id)
						return
					}
					if (data.type == 'task') {
						that.getTaskData(data.task_id)
						return
					}
					if (data.type == 'goods') {
						that.getGoodsData(data.goods_id)
						return
					}
					that.chatList.push(data);
					that.$nextTick(() => {
						that.height();
					});
				})
				this.ws.onOpen(() => {
					console.log('WebSocket连接已打开！');
				});
				this.ws.onError((err) => {
				  console.log('WebSocket连接打开失败，请检查！');
				});
			}
			this.$u.post('member/api.center/getCenterInfo').then(res => {
				this.myUid = res.data.userInfo.user_id;
				initSocket()
			});
			uni.$on('socketClose', () => {
				console.log('关闭连接')
				this.socketCloses()
				clearInterval(this.timer);
			});
			uni.$on('selectLiveAddress', (res) => {
				that.selectAddress = res
				that.address = res.merger_name+res.address
			});
			uni.$on('selectLiveStore', (res) => {
				console.log(res)
				that.sid = res.id
				that.store_name = res.store_name
			});
		},
		methods: {
			socketCloses() {
			  if (this.ws) {
				this.ws.close();
			  }
			},
			send: function(data) {
				let datas = JSON.stringify(data)
				// console.log('消息内容：',datas)
				return uni.sendSocketMessage({
					data: datas,
					success() {
						// console.log('消息内容：',datas)
						// console.log('消息发送成功')
					},fail(e) {
						// console.log('消息失败')
						console.log(e)
					}
				});
			},
			updateIsPlayback(bool) {
				this.isPlayback = bool;
			},
			
			updateActiveTab(val) {
				this.activeTab = val;
			},
			tabChange(e){
				this.tabCurrent = e
			},
			// 滚动到顶部
			scrollToTop() {
				let self = this;
				if (this.isScroll) {
					this.loading = true;
					this.isScroll = false;
					setTimeout(res => {
						this.page++
						this.getChatList();
					}, 800);
				}
			},
			// 设置页面滚动位置
			setPageScrollTo(selector) {
				let view = uni
					.createSelectorQuery()
					.in(this)
					.select(selector);
				view.boundingClientRect(res => {
					this.scrollTop = res ? parseFloat(res.top) - 60 : 0;
					// console.log(res.top,88)
				}).exec();
			},
			getChatList() {
				let self = this;
				this.$u.post('live/api.index/chatList',{
						page:this.page,
						limit: this.limit,
						room_id: this.liveId
					})
					.then(res => {
						let selector = '';
						if (res.data.serviceList.length) {
							selector = `#msg-${res.data.serviceList[res.data.serviceList.length - 1].id}`;
						}
						let arr = [];
						var sH = 0;
						uni.hideLoading();
						// res.data.serviceList.forEach(el => {
							// el._add_time = el._add_time.substring(0, el._add_time.length - 3);
							// el.msn = this.replace_em(el.msn);
			
						// });
						this.loading = false;
						this.chatList = [...res.data.serviceList, ...this.chatList];
						this.$nextTick(() => {
							if (this.chatList.length) {
								this.setPageScrollTo(selector);
								this.isScroll = res.data.serviceList.length >= this.limit;
							}
			
						});
		
						// this.$socket.send({
						// 	data: {
						// 		id: this.toUid
						// 	},
						// 	type: 'to_chat'
						// });
					})
					.catch(error => {
						uni.hideLoading();
						this.loading = false;
						this.isScroll = false
			
					});
			},
			// 聊天表情转换
			replace_em(str) {
				str = str.replace(/\[([^\[\]]+)\]/g, "<span class='em $1' style='background-image:url(" + this
					.httpUrl + ")'></span>");
				return str;
			},
			height() {
				let self = this;
				var scrollTop = 0;
				let info = uni.createSelectorQuery().select('.chat');
				setTimeout(res => {
					info.boundingClientRect(function(data) {
						//data - 各种参数
						scrollTop = data.height;
						if (self.active) {
							self.scrollTop = parseInt(scrollTop) + 500;
						} else {
							self.scrollTop = parseInt(scrollTop) + 100;
						}
					}).exec();
				}, 200);
			},
			sendText() {
				if (!this.isSend) {
					uni.showToast({
						title:'请输入内容',
						icon:'none'
					})
				}
				this.send({
					type: "say",
					user_id:this.myUid,
					name:'测试',
					room_id: this.liveId,
					content:this.con
				});
				this.con = '';
			},
			getCouponList(type){
				this.$u.post('live/api.Index/getCouponList',{live_id:this.liveId}).then(res => {
					this.couponList = res.data
					if(this.couponList.length > 0){
						this.roomInfo.couponIds = 1
						this.showCoupon = true
					}else{
						if(type == 1){
							this.navTo('/pages/shop/bonus/center?is_live=1')
						}
					}
					this.couponList.forEach(item=>{
						this.totalCoupon += item.type_money
					})
				})
			},
			receivefree(id){
				let that = this
				this.$u.post('shop/api.bonus/receiveFree',{id:id}).then(res => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						that.showCoupon = false
					}
			
				})
			},
			getLuckyData(id){
				this.$u.post('live/api.Index/getLuckyData',{lucky_id:id}).then(res => {
					if(res.data.length != 0){
						this.luckData = res.data
						this.showLucky = true
					}else{
						this.luckData = ''
					}
				})
			},
			receiveLucky(id){
				let that = this
				this.$u.post('live/api.Index/receiveLucky',{id:id,live_id:this.liveId}).then(res => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						that.showLucky = false
					}
			
				})
			},
			getTaskData(id){
				this.$u.post('live/api.Index/getTaskData',{task_id:id}).then(res => {
					if(res.data.length != 0){
						this.taskData = res.data
						this.showTask = true
					}else{
						this.taskData = ''
					}
				})
			},
			receiveTask(id,type,logistics_type){
				let that = this
				if(type == 0){
					if(logistics_type == 0){
						if(!this.address){
							this.tips('请选择收货地址再领取')
							return
						}
					}else{
						if(!this.sid){
							this.tips('请选择提货门店')
							return
						}
					}
				}
				this.$u.post('live/api.Index/receiveTask',{
					id:id,
					live_id:this.liveId,
					address_id:this.selectAddress.address_id,
					sid:this.sid
				}).then(res => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 1){
						that.showTask = false
					}
			
				})
			},
			getGoodsData(goods_id){
				this.roomInfo.goodsList.forEach(item => {
					if(goods_id == item.id){
						if(this.goods.id == goods_id){
							this.showJxGoods = false
							this.goods = ''
						}else{
							this.goods = item
							this.showJxGoods = true
						}
					}
				})
			},
			lqTask(item){
				this.showTask = true
				this.showTaskList = false
				this.taskData = item
			},
			getTaskList(){
				this.showTaskList = true
				this.$u.get('live/api.index/taskList',{live_id:this.liveId}).then(res => {
					this.allTaskList = res.data
				})
			},
			showActionQrcode(){
				this.showShareQrcode = true
				//#ifdef MP-WEIXIN
					this.is_wxmp = 1;
				//#endif
				this.$u.post('live/api.index/getShareImg',{live_id:this.liveId,isnew:1,is_wxmp:this.is_wxmp}).then(res => {
					this.img_url = [];
					this.current_img = this.baseUrl+res.data.img[0]
					res.data.img.forEach(item => {
						this.img_url.push({image:this.baseUrl+item})
					})
					// this.share_url = res.data.share_url;
				});
			},
			bindchange(e) {
				let spreadList = this.spreadList;
				this.swiperIndex = e.detail.current;
				this.current_img = this.img_url[e.detail.current].image
				console.log(this.current_img)
			},
			likeLive(){
				this.$u.get('live/api.index/like',{live_id:this.liveId}).then(res => {
					// this.tips('点赞成功')
					this.likeCount = res.data.count
				})
			},
		},
	}
</script>

<style lang="scss">
	@import 'base.scss';
	
	.wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		font-size: 0.28rem;
	}
	
	.player-container {
		position: relative;
		flex: none;
		width: 100%;
		padding-top: 56.25%;
		color: #fff;
		background-color: #000;
	}
	
	.room-content {
		flex: auto;
		min-height: 300px;
		padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
	.desc-box{
		margin: 20rpx;
		.content{
			font-size: 28rpx;
			line-height: 48rpx;
		}
	}
	.ranking{
		.ranking-list{
			height: 255px;
			overflow-y: auto;
			overflow-x: hidden;
			padding: 0px 10px;
			.item{
				display: flex;
				border-bottom: 1px solid #F1F1F1;
				padding: 16rpx;
				align-items: center;
				margin-top: 10px;
				border-radius: 5px;
				background: #FFFFFF;
			    .rank-info{
			        display: flex;
			        width: 70%;
			        align-items: center;
			    }
			    .avatars{
			
			    }
			    .avatars img{
			        width: 30px;
			        height: 30px;
			        border-radius: 50%;
			    }
			    .nickname{
			        margin-left: 10px;
			    }
			    .time{
			        width: 30%;
			        text-align: right;
			    }
			}
		}
	}
	.goods-box{
		color: #333;
		.titles{
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #e1e1e1;
		}
		.goods-list-scroll{
			height: 800rpx;
			.item{
				display: flex;
				background-color: #FFFFFF;
				margin-bottom: 20rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				border-bottom: 1px solid #F1F1F1;
				&:last-child{
					border-bottom:none;
				}
				.image{
					width: 120rpx;
					image{
						width: 120rpx;
						height: 120rpx;
					}
				}
				.info{
					width: 566rpx;
					margin-left: 20rpx;
					position: relative;
					.title{
						font-size: 32rpx;
						height: 82rpx;
					}
					.price{
						font-size: 32rpx;
						text{
							color: #d03737;
						}
						.ot-price{
							margin-left: 10rpx;
							color: #999999;
							font-size: 26rpx;
							text-decoration: line-through;
						}
					}
					.buy{
						position: absolute;
						right: 0;
						bottom: 10rpx;
						text{
							background-color: #d03737;
							color: #FFFFFF;
							font-size: 24rpx;
							padding: 10rpx 20rpx;
							border-radius: 10rpx;
						}
					}
				}
			}
		}
	}
	.chat-scroll-box {
		flex: 1;
		padding: 30rpx 30rpx 0;
		overflow: hidden;
	
		.chat-item {
			display: flex;
			margin-bottom: 36rpx;
			-webkit-user-select: auto;
	
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
	
			.msg-box {

				.nickname{
					display: flex;
					align-items: center;
					max-width: 452rpx;
					// margin-left: 22rpx;
					padding: 0rpx 24rpx 10rpx 24rpx;
					// background: #fff;
					border-radius: 14rpx;
					word-break: break-all;
					font-size: 24rpx;
					-webkit-user-select: auto;
				}
				.msn{
					display: flex;
					align-items: center;
					max-width: 452rpx;
					margin-left: 22rpx;
					padding: 10rpx 24rpx;
					background: #fff;
					border-radius: 14rpx;
					word-break: break-all;
					-webkit-user-select: auto;
					font-size: 30rpx;
				}
			}
	
			.img-box {
				width: 270rpx;
				margin-left: 22rpx;
	
				image {
					width: 270rpx;
				}
			}
	
			.product-box {
				width: 452rpx;
				margin-left: 22rpx;
				background-color: #fff;
				border-radius: 14rpx;
				overflow: hidden;
	
				image {
					width: 452rpx;
				}
	
				.info {
					padding: 16rpx 26rpx;
	
					.price {
						font-size: 36rpx;
						color: var(--view-priceColor);
	
						text {
							font-size: 28rpx;
						}
					}
				}
			}
	
			.order-box {
				width: 452rpx;
				margin-left: 22rpx;
				background-color: #fff;
				border-radius: 14rpx;
	
				.title {
					padding: 15rpx 20rpx;
					font-size: 26rpx;
					color: #282828;
					border-bottom: 1px solid #eceff8;
				}
	
				.info {
					display: flex;
					padding: 20rpx;
	
					image {
						width: 124rpx;
						height: 124rpx;
						border-radius: 6rpx;
					}
	
					.product-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 16rpx;
	
						.name {
							font-size: 26rpx;
						}
	
						.price {
							font-size: 30rpx;
							color: var(--view-priceColor);
						}
					}
				}
			}
	
			&.right-box {
				flex-direction: row-reverse;
	
				.msg-box {
					margin-left: 0;
					margin-right: 22rpx;
					.msn{
						background-color: #9cec60;
					}
				}
	
				.img-box {
					margin-left: 0;
					margin-right: 22rpx;
				}
	
				.product-box {
					margin-left: 0;
					margin-right: 22rpx;
				}
	
				.order-box {
					margin-left: 0;
					margin-right: 22rpx;
				}
			}
	
			.em {
				margin: 0;
			}
		}
	}
	.day-box {
		font-size: 24rpx;
		color: #999;
		text-align: center;
		margin-bottom: 36rpx;
	}
	.chat-box {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #f0f1f2;
		/* #ifdef H5 */
		height: 100vh;
		/* #endif */
		.scroll-box {
			flex: 1;
		}

		.footer-box {
			position: relative;
			display: flex;
			align-items: center;
			color: rgba(0, 0, 0, 0.8);
			background:rgba(255, 255, 255, 0.6);;
			/* #ifdef APP-PLUS */
			padding: 0 10rpx;
			height: 70rpx;
			height: (70rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			height: calc(70rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			/* #endif */

			/* #ifndef APP-PLUS */
			padding: 0 10rpx 0rpx 10rpx;
			height: 100rpx;

			/* #endif */
			.words .icon-tupian {
				font-size: 50rpx;
			}

			.input-box {
				// display: flex;
				// align-items: center;
				// flex: 1;
				height: 64rpx;
				padding-right: 5rpx;
				// margin-left: 18rpx;
				background-color: #fff;
				border-radius: 32rpx;
				width: 330rpx;
				margin-right: 40rpx;
				input {
					flex: 1;
					padding-left: 20rpx;
					height: 100%;
					font-size: 28rpx;
					font-weight: normal;
				}

				.icon-fasong {
					font-size: 50rpx;
					color: #ccc;
					font-weight: normal;
				}

				.isSend {
					color: #999;
				}
			}

			.emoji .icon-biaoqing {
				margin-left: 18rpx;
				font-size: 50rpx;
			}

			.more .icon-gengduozhankai {
				margin-left: 18rpx;
				font-size: 50rpx;
			}
		}
	}
	/deep/.u-mode-center-box{
		background: none !important;
	}
	.coupon-box{
		position: relative;
		image{
			width: 100%;
		}
		.coupon-con{
			position: absolute;
			z-index: 9;
			top: 100rpx;
			left: 0rpx;
			width: 100%;
			text-align: center;
			.price{
				color: #d63a3a;
				font-size: 100rpx;
				font-weight: bold;
			}
			.name{
				margin-top: 60rpx;
				color: #e2e2e2;
			}
			.time{
				margin-top: 140rpx;
				color: #fbb976;
				font-size: 24rpx;
			}
		}
		.coupon-cons{
			position: absolute;
			top: 40rpx;
			left: 0rpx;
			width: 100%;
			text-align: center;
			.title{
				color: #fb257e;
				font-weight: bold;
			}
			.sub-title{
				color: #fb257e;
				font-weight: bold;
			}
			.coupon-list{
				margin: 20rpx 60rpx 20rpx 50rpx;
				position: relative;
				.coupon-list-scroll{
					height: 230rpx;
					.items{
						color: #FFFFFF;
						position: relative;
						margin-bottom: 10rpx;
						.price{
							position: absolute;
							top: 20rpx;
							left: 70rpx;
							font-size: 60rpx;
							font-weight: bold;
						}
						.name{
							position: absolute;
							top: 48rpx;
							left: 224rpx;
							font-size: 24rpx;
							color: #ececec;
						}
					}
				}
	
			}
			.task-box{
				position: relative;
				color: #000;
				.price{
					color: #fb257e;
					font-weight: bold;
					font-size: 120rpx;
					margin-top: 50rpx;
					text{
						font-size: 30rpx;
					}
				}
				.name{
					color: #666666;
				}
				.goods-name{
					margin-top: 40rpx;
					color: #fb257e;
					font-size: 38rpx;
					font-weight: bold;
				}
				.select{
					margin-top: 50rpx;
					border: 1px solid #fb257e;
					color: #fb257e;
					display: inline-block;
					padding: 10rpx 30rpx;
					border-radius: 10rpx;
				}
				.address{
					font-size: 12px;
					color: #666;
					margin-top: 20px;
					padding: 0 30px;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}
		}
		.close{
			text-align: center;
			margin-top: 20rpx;
		}
		.submit{
			// background: rgb(255, 0, 0);
			position: absolute;
			bottom: 180rpx;
			left: 50%;
			width: 145px;
			margin-left: -75px;
			height: 70rpx;
			z-index: 99;
		}
	}
	.goods{
		display: flex;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		position: absolute;
		bottom: 150rpx;
		left: 30rpx;
		z-index: 10;
		width: 500rpx;
		.image{
			width: 120rpx;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}
		}
		.info{
			width: 350rpx;
			margin-left: 20rpx;
			position: relative;
			.title{
				font-size: 28rpx;
				height: 82rpx;
				color: #333;
			}
			.price{
				font-size: 32rpx;
				text{
					color: #d03737;
				}
				.ot-price{
					margin-left: 10rpx;
					color: #999999;
					font-size: 26rpx;
					text-decoration: line-through;
				}
			}
			.buy{
				position: absolute;
				right: 0;
				bottom: 5rpx;
				text{
					background-color: #d03737;
					color: #FFFFFF;
					font-size: 24rpx;
					padding: 10rpx 20rpx;
					border-radius: 10rpx;
				}
			}
		}
		.close{
			position: absolute;
			right: -60rpx;
			top: 60rpx;
		}
	}
	.list-icon{
		z-index: 101;
		margin-right: 20rpx;
		position: relative;
		top: 0rpx;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
	.cart-icon{
		// position: absolute;
		// bottom: 240rpx;
		// right:34rpx;
		z-index: 101;
		margin-right: 15rpx;
		image{
			width: 75rpx;
			height: 75rpx;
		}
	}
	.like-icon{
		z-index: 101;
		margin-right: 15rpx;
		image{
			width: 75rpx;
			height: 75rpx;
		}
	}
	.more-icon{
		z-index: 101;
		image{
			width: 75rpx;
			height: 75rpx;
		}
	}
	.smile-icon{
		position: absolute;
		left: 370rpx;
		top: 26rpx;
		z-index: 101;
		image{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.coupon-icon{
		position: absolute;
		bottom: 330rpx;
		right:32rpx;
		z-index: 101;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
	.lucky-icon{
		position: absolute;
		bottom: 40vh;
		right:32rpx;
		z-index: 101;
		text-align: center;
		image{
			width: 80rpx;
			height: 80rpx;
		}
		.txt{
			margin-top: 6rpx;
			font-size: 24rpx;
			background-color: rgba(151, 151, 151, 0.5);
			text-align: center;
			padding: 4rpx 20rpx 6rpx 20rpx;
			border-radius: 50rpx;
			transform:scale(0.85);
		}
	}
	.task-icon{
		position: absolute;
		bottom: 530rpx;
		right:32rpx;
		z-index: 101;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
	.share-icon{
		position: absolute;
		bottom: 52vh;
		right:32rpx;
		z-index: 101;
		text-align: center;
		image{
			width: 80rpx;
			height: 80rpx;
		}
		.txt{
			margin-top: 6rpx;
			font-size: 24rpx;
			background-color: rgba(151, 151, 151, 0.5);
			text-align: center;
			padding: 4rpx 20rpx 6rpx 20rpx;
			border-radius: 50rpx;
			transform:scale(0.85);
		}
	}
	.task-list-box{
		position: relative;
		.task-bg{
			width: 100%;
			image{
				width: 100%;
			}
		}
		.titles{
			position: absolute;
			z-index: 150;
			top: 100rpx;
			right: 100rpx;
			color: #FFF;
			font-size: 38rpx;
			font-weight: bold;
		}
		.list{
			margin: 20rpx 0;
			font-size: 24rpx;
			position: absolute;
			top: 220rpx;
			left: 60rpx;
			color: #666666;
			.item{
				display: flex;
				margin-bottom: 20rpx;
				.icon{
					margin-right: 16rpx;
					width: 70rpx;
					image{
						width: 70rpx;
						height: 70rpx;
					}
				}
				.center-box{
					width: 330rpx;
					.top{
						display: flex;
						.name{
							color: #000;
							margin-right: 10rpx;
						}
						.progress{
							width: 40%;
							// margin-right: 10rpx;
						}
						.num{
							transform:scale(0.8);
							text{
								color: #d03737;
							}
						}
					}
					.desc{
						color: #999999;
						transform:scale(0.8);
						white-space: nowrap;
						margin-left: -36rpx;
						margin-top: 8rpx;
					}
				}
				.right-box{
					width: 120rpx;
					text-align: center;
					transform:scale(0.9);
					padding-top: 10rpx;
					text{
						background: linear-gradient(to right, #e50b7c, #ea525e);
						color: #FFFFFF;
						padding: 10rpx 20rpx;
						border-radius: 50rpx;
					}
				}
			}
		}
		.close{
			text-align: center;
			margin-top: 10rpx;
			.icon{
				background-color: rgba(151, 151, 151, 0.5);
				display: inline-block;
				padding: 10rpx;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}
		}
		// .task-status{
		// 	background-color: #999;
		// 	color: #fff;
		// 	display: inline-block;
		// 	font-size: 24rpx;
		// 	padding: 10rpx 20rpx;
		// 	border-radius: 8rpx;
		// }
	}
	.tips{
		// background-color: #999999;
		position: absolute;
		top:0;
		width:100%;
		z-index: 99999;
		image{
			width: 100%;
		}
	}
	.wechat-qrcode{
		color: #333;
		background-color: #FFFFFF;
		.titles{
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #e1e1e1;
		}
		.img{
			padding: 30rpx;
			image{
				width: 500rpx;
				height: 500rpx;
				border-radius: 16rpx;
			}
		}
		
	}
	.distribution-posters{
		width: 710rpx;
		.qrcode-tips{
			text-align: center;
			margin-top: -50rpx;
			color: #FFF;
		}
	}
	.distribution-posters swiper {
		width: 100%;
		height: 1050rpx;
		position: relative;
		margin-top: 40rpx;
	}
	
	.distribution-posters .slide-image {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		border-radius: 15rpx;
	}
	
	.distribution-posters /deep/.active {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}
	
	.distribution-posters /deep/ .quiet {
		transform: scale(0.8333333);
		transition: all 0.2s ease-in 0s;
	}
	
	.distribution-posters .keep {
		font-size: 30rpx;
		color: #fff;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 38rpx auto;
	}
	
	.distribution-posters .preserve {
		color: #fff;
		text-align: center;
		margin-top: 38rpx;
	}
	
	.distribution-posters .preserve .line {
		width: 100rpx;
		height: 1px;
		background-color: #fff;
	}
	
	.distribution-posters .preserve .tip {
		margin: 0 30rpx;
	}
	.canvas {
		width: 100%;
		height: 550px;
	}
</style>